<template>
	<view  class="content">
		<view class="card" v-for="(item,index) in dataList" :key="index">
			<view class="title-content">
				<view @click="toDetails(item)"
					style="display: flex;padding: 20rpx 20rpx 0 20rpx; justify-content: space-between;">
					<view class="title">
						{{item.closingNo}}
					</view>
					<view class="title-c" style="padding: 10rpx;border-radius: 8rpx;color: #201b8c;">
						{{auditStatus[item.auditStatus] ? auditStatus[item.auditStatus] : ''}}
					</view>
				</view>
				<view style="border-bottom: 1px solid #f6f6f6;margin: 20rpx;"></view>
				<view class="column" style="display: flex;justify-content: space-between;">
					<view class="font-weight-content">
						转账金额
					</view>
					<view class="font-weight-content">
						{{item.amount}}元
					</view>
				</view>
				<view style="display: flex;padding: 20rpx;justify-content: space-between;">
					<view class="title">
						结算类型
					</view>
					<view class="title-c">
					    {{closingType[item.closingType]}}
					</view>
				</view>
				<view style="display: flex;padding: 20rpx;justify-content: space-between;">
					<view class="title">
						到账状态
					</view>
					<view class="title-c" style="color: #201b8c;">
					    {{accountStatus[item.accountStatus]}}
					</view>
				</view>
				<view style="display: flex;padding: 20rpx;justify-content: space-between;">
					<view class="title">
						申请时间
					</view>
					<view class="title-c" >
					    {{item.createTime}}
					</view>
				</view>
				<view style="display: flex;padding: 20rpx;justify-content: space-between;">
					<view class="title">
						审核时间
					</view>
					<view class="title-c" >
					    {{item.auditTime ? item.auditTime : '-'}}
					</view>
				</view>
				
				<view style="border-bottom: 1px solid #f6f6f6;margin: 20rpx;"></view>
			</view>
		</view>
		<u-empty v-if="!dataList.length" style="background-color: #fff;height: 100vh;" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<!-- 上拉加载更多 -->
		<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
	import {getClosingListApi} from '@/api/finance.js';
	 export default{
		 data(){
			 return{
				 cancellForm: {
				 	page: 1,
				 	limit: 10,
				 },
				 dataList:[],
				 totalPage: 1,
				 loadMoreStatus: 'noMore',
				 auditStatus:{
					 0:'待审核',
					 1:'已通过',
					 2:'未通过'
				 },
				 accountStatus:{
					 0:'未到账',
					 1:'已到账'
				 },
				 closingType:{
					 bank:'银行卡',
					 wechat:'微信',
					 alipay:'支付宝',
				 }
			 }
		 },
		 onLoad(){
			 this.bgColor = setThemeColor();
			 uni.setNavigationBarColor({
			 	frontColor: '#ffffff',
			 	backgroundColor: this.bgColor,
			 });
		 },
		 created() {
		 	this.initData();
		 },
		 methods:{
			 initData() {
			 	// 首次激活时被调用
			 	this.cancellForm.page = 1;
			 	this.loadMoreStatus = 'more';
			 	
			 	this.getCancelList();
			 },
			 // 触底事件 onReachBottom 加载更多数据
			 scrolltolowerFn() {
			 	if (this.loadMoreStatus != 'more') {
			 		return;
			 	};
			 	this.cancellForm.page++;
			 	this.getCancelList(true);
			 },
			 onrefresh(e) {
			 	this.refreshing = true;
			 	this.refreshText = "刷新中...";
			 	setTimeout(() => {
			 		this.refreshing = false;
			 		this.refreshFlag = false;
			 		this.refreshText = "已刷新";
			 	}, 2000)
			 },
			 onpullingdown(e) {
			 	if (this.refreshing) {
			 		return;
			 	}
			 	this.pulling = false;
			 	if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
			 		this.refreshFlag = true;
			 		this.refreshText = "释放立即刷新";
			 	} else {
			 		this.refreshFlag = false;
			 		this.refreshText = "下拉可以刷新";
			 	}
			 },
			 toDetails(item){
				 this.$emit('toDetails',item)
			 },
			 // --------api------获取数据
			 getCancelList(isMerge) {
			 	let that = this;
			 	uni.showLoading({
			 		title: '加载中',
			 		mask: true
			 	});
			 	if (!isMerge) {
			 		this.cancellForm.page = 1;
			 		this.loadMoreStatus = 'more';
			 	};
			 	getClosingListApi(this.cancellForm).then((res) => {
			 		let data = res.data;
			 		if (isMerge) {
			 			that.$util.SplitArray(data.list, that.dataList);
			 		} else {
			 			that.dataList = data.list;
			 		}
			 		that.totalPage = data.totalPage;
			 		if (data.totalPage == this.cancellForm.page) {
			 			that.loadMoreStatus = 'noMore';
			 		}
			 		uni.hideLoading();
			 	})
			 },
		 }
	 }
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}
	
	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}
	
	.card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 10rpx;
	}
	
	.font-weight-content {
		font-weight: bold;
	}
	
	.column {
		padding: 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;
	
		.title {
			display: flex;
			// flex: 1;
			width: 150rpx;
		}
	
		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}
	
</style>